<template>
  <div class="w-full h-10 text-lg m-1 border-l-4 border-l-green-400 flex justify-around items-center text-white">
    <div @click="active = 'index'" :class="active === 'index' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
      抢单代付
    </div>
    <div @click="active = 'report'"
      :class="active === 'report' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
      报备信息
    </div>
    <div @click="active = 'count'" :class="active === 'count' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
      统计信息
    </div>
  </div>

  <div class="m-1 rounded-lg bg-white p-3" v-html="dialog[active].content"></div>
  <div v-if="active === 'index'">
    <div class="w-full h-10 text-lg m-1 border-l-4 border-l-green-400 flex justify-around items-center text-white">
      <div @click="status = 0" :class="status === 0 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        等待抢单
      </div>
      <div @click="status = 1" :class="status === 1 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        支付中
      </div>
      <div @click="status = 2" :class="status === 2 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        等待确认
      </div>
      <div @click="status = 3" :class="status === 3 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        已结算
      </div>
      <div @click="status = 4" :class="status === 4 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
        取消订单
      </div>
    </div>

    <ReportList v-if="status === 0" />
    <ReviewList v-else-if="status != 0" :orderStatus="status" />

  </div>

  <AddComp v-if="active === 'report'" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ReportList from './components/ReportList.vue'
import ReviewList from './components/ReviewList.vue'
import AddComp from './components/add.vue'
import { GetOrderStatusApi } from '@/apis/payment'
import { GetReminderInfo } from '@/utils/system'

const active = ref('index')
const status = ref(0)
const dialog = ref({
  index: {
    title: '抢单代付',
    content: '',
  },
  report: {
    title: '报备信息',
    content: '',
  },
  count: {
    title: '统计信息',
    content: '',
  },
})

onMounted(async () => {
  const data = await GetOrderStatusApi()
  localStorage.setItem('orderStatus', JSON.stringify(data))

  let cnt = await GetReminderInfo('app_payment_index')
  dialog.value.index = cnt
  cnt = await GetReminderInfo('app_payment_report')
  dialog.value.report = cnt
  cnt = await GetReminderInfo('app_payment_count')
  dialog.value.count = cnt
})
</script>
